<template>
  <div>
    <van-row style="padding-top: 1rem;padding-bottom: 1rem">
      <van-col span="12"></van-col>
      <van-col span="12"></van-col>
    </van-row>
    <van-row>
      <van-col span="12">
        <van-popup position="top" v-model:show="show">
          <van-row>
            <van-col span="24">
              <van-row>
                <van-col span="8" align="right" style="padding-top: 1%">属性值:</van-col>
                <van-col span="16"><van-field v-model="field"  /></van-col>
              </van-row>

              <van-button @click="sure">确认</van-button>
            </van-col>
          </van-row>

        </van-popup>
        <div v-for="(i,index) in typelst" :key="index">
          表单类型选项:
          <select v-model="type">
            <option :value="j['type']" v-for="(j,k) in i" :key="k">{{j.name}}</option>
          </select>
        </div>
        <div v-if="type=='text'">
          <van-field :label="名称"/>
        </div>
        <div v-else-if="type=='radio'">
          <van-radio-group v-model="check" direction="horizontal">
            <van-radio name="1">单选框 1</van-radio>
            <van-radio name="2">单选框 2</van-radio>
          </van-radio-group>
        </div>
        <div v-else-if="type=='checkbox'">
          <van-checkbox-group v-model="checked">
            <van-checkbox name="a">复选框 a</van-checkbox>
            <van-checkbox name="b">复选框 b</van-checkbox>
          </van-checkbox-group>
        </div>
        <div v-else-if="type=='uploader'">
          <van-uploader />
        </div>
        <van-button @click="add1">+</van-button>
        <van-button @click="addwork1">添加</van-button>
      </van-col>
      <van-col span="12"></van-col>
    </van-row>
    <van-row align="left">
      <van-col span="12">
        <div>
          <div v-for="(i,index) in lst" :key="index">
            <div v-for="(j,k) in i" :key="k">{{j.label}}<input :type="j.type"></div>
          </div>
        </div>
      </van-col>
      <van-col span="12"></van-col>
    </van-row>
  </div>
</template>

<script>
import myaxios from "../../../https/myaxios";

export default {
  name: "process_manage",
  data(){
    return{
      typelst:[[{"id":1,"name":"输入框","type":"text"},{"id":2,"name":"单选框","type":"radio"},{"id":3,"name":"复选框","type":"checkbox"},{"id":3,"name":"文件上传","type":"uploader"}]],
      // lst:[[{"label":"名称","key":"name"},{"label":"类型","key":"type"},{"label":"字段","key":"field"},{"label":"值","key":"val"}]],
      // lst:[{"type":"text","label":"名称","key":"name"},{"type":"redio","label":"单选框","key":"name"},{"type":"checkbox","label":"复选框","key":"name"}],
      lst:[],
      showlist:[],
      values:{},
      values1:{},
      type:'',
      check:0,
      checked:'a',
      show:false,
      field:'',
    }
  },
  methods:{
    add(){
      this.lst.push([{"label":"名称","key":"name"},{"label":"类型","key":"type"},{"label":"字段","key":"field"},{"label":"值","key":"val"}])
    },
    add1(){
      // alert(this.type)
      this.show=true
    },
    sure(){
      if(this.type=='text'){
        this.lst.push([{"type":"text","label":this.field,"key":"name"}])
      }else if (this.type=='radio'){
        this.lst.push([{"type":"radio","label":this.field,"key":"radio"}])
      }else if(this.type=="checkbox"){
        this.lst.push([{"type":"checkbox","label":this.field,"key":"checkbox"}])
      }else if(this.type=="uploader"){
        this.lst.push([{"type":"file","label":this.field,"key":"uploader"}])
      }
      console.log(this.lst)
      this.show=false
    },
    addwork1(){
      var sublist = []
      for(let i=0;i<this.lst.length;i++){
        var name = "name" + i
        sublist.push({"name":this.values1[name]})
      }
      let data = new FormData()
      data.append("id",localStorage.getItem("userid"))
      data.append("list",JSON.stringify(sublist))
      myaxios("addparams",).then(res=>{
        alert(res.msg)
      })
    },
    // addwork(){
    //   var sublist = []
    //   for(let i=0;i<this.lst.length;i++){
    //     var name = "name" + i
    //     var type = "type" + i
    //     var field = "field" + i
    //     var val = "val" + i
    //     sublist.push({"name":this.values[name],"type":type.values["type"],"field":this.values[field],"value":this.values[val]})
    //   }
    //   let data = new FormData()
    //   data.append("id",localStorage.getItem("userid"))
    //   data.append("list",JSON.stringify(sublist))
    //   myaxios("addparams",).then(res=>{
    //     alert(res.msg)
    //   })
    // }

  }
}
</script>

<style scoped>

</style>